<template>
  <page-frame bg="#000">
    <div class="Pc">
      <div class="main">

        <div class="form">
          <div class="item">
            <span class="i">*</span>
            <span class="name">钱包地址</span>
            <input type="text" v-model="ruleForm.address" placeholder="请输入钱包地址">
          </div>
          <div class="item">
            <span class="i">*</span>
            <span class="name">金额</span>
            <input type="text" v-model="ruleForm.amount" placeholder="请输入金额">
          </div>
          <div class="item">
            <span class="i">*</span>
            <span class="name">邮箱</span>
            <input type="text" v-model="userInfo.nickname" disabled>
            <span class="code" @click="handlerCode">{{ sendContent }}</span>
          </div>
          <div class="item">
            <span class="i">*</span>
            <span class="name">验证码</span>
            <input type="text" v-model="ruleForm.code" placeholder="请输入验证码">
          </div>
        </div>
        <el-button class="btn" @click="submitForm">提交</el-button>
      </div>
    </div>
    <div class="Mobile">
      <div class="main">

        <div class="form">
          <div class="item">
            <span class="i">*</span>
            <span class="name">钱包地址</span>
            <input type="text" v-model="ruleForm.address" placeholder="请输入钱包地址">
          </div>
          <div class="item">
            <span class="i">*</span>
            <span class="name">金额</span>
            <input type="text" v-model="ruleForm.amount" placeholder="请输入金额">
          </div>
          <div class="item">
            <span class="i">*</span>
            <span class="name">邮箱</span>
            <input type="text" v-model="userInfo.nickname" disabled>
            <span class="code" @click="handlerCode">{{ sendContent }}</span>
          </div>
          <div class="item">
            <span class="i">*</span>
            <span class="name">验证码</span>
            <input type="text" v-model="ruleForm.code" placeholder="请输入验证码">
          </div>
        </div>
        <el-button class="btn" @click="submitForm">提交</el-button>
      </div>
    </div>

  </page-frame>
</template>

<script>
import {reactive, ref, toRefs, getCurrentInstance} from "vue";


export default {
  name: "Recharge",
  setup() {
    /* 全局挂载utils工具类 start */
    const {proxy} = getCurrentInstance();
    const {$api, $common, $validate, $router, $elUtils, $tokenUtils, $ext} =
        proxy;

    /* 全局挂载 end */
    const state = reactive({
      userInfo: $ext.getUser(),
      ruleForm: {
        address: "",
        amount: 0,
        code: "",
      },
      sendContent: "Send Code",
      smsWait: 0,
      sendClass: false,
    });

    const submitForm = async () => {
      if (
          $validate.isNull(state.ruleForm.address) ||
          !$validate.isEmail(state.ruleForm.address)
      ) {
        $elUtils.warnMsg("Address is not correct, please check.");
        return;
      }
      if (
          $validate.isNull(state.ruleForm.amount) ||
          !$validate.isEmail(state.ruleForm.amount)
      ) {
        $elUtils.warnMsg("Amount is not correct, please check.");
        return;
      }
      if ($validate.isNull(state.ruleForm.code)) {
        $elUtils.warnMsg("Code is not correct, please check.");
        return;
      }

      const paramObj = {
        address: state.ruleForm.address,
        code: state.ruleForm.code,
        amount: state.ruleForm.amount,
      };
      $api
          .withdraw(paramObj)
          .then((res) => {
            if (res.code == 1) {
              $router.push({name: "Login"});
              $elUtils.successMsg("Register Success!!");
            } else {
              $elUtils.errorMsg(res.msg);
            }
          })
          .catch((err) => {
            $elUtils.errorMsg(err.msg);
          });
    };

    // 发送验证码
    const handlerCode = () => {
      if (state.smsWait !== 0) {
        return false;
      }

      $api
          .emsSend({email: state.userInfo.nickname, event: "withdraw"})
          .then((res) => {
            if (res.code == 1) {
              state.smsWait = 60;
              waitSms();
              state.smsInterval = setInterval(function () {
                waitSms();
              }, 1000);
            } else {
              $elUtils.warnMsg(res.msg);
              return;
            }
          });
    };

    // 验证码倒计时
    const waitSms = () => {
      state.smsWait--;
      if (state.smsWait === 0) {
        clearInterval(state.smsInterval);
        state.sendContent = "Send Code";
        state.sendClass = false;
      } else {
        state.sendClass = true;
        state.sendContent = state.smsWait;
      }
    };
    return {
      ...toRefs(state),
      handlerCode,
      submitForm,
    };
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'extract';

input {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  padding-left: 10px;
  font-size: 16px;
  color: #333333;
  background: #eee;
  border: 0;
}

input:focus,
input:focus-visible {
  background-color: rgb(255, 255, 255) !important;
  border: 2px solid rgb(33, 138, 251) !important;
}

.input__inner {
  width: 100%;
  border: 0 !important;
  background: #eee !important;
}

.login-body {
  display: flex;
  /*x轴对齐*/
  justify-content: center;
  /*y轴对齐*/
  align-items: center;
  height: calc(100vh - 70px);
  width: 100%;
  background-color: #fff;
  //padding-top: 180px;
  .login-container {
    width: 500px;
    height: 380px;
    background-color: #fff;
    border-radius: 4px;

    .head {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px 0;

      .title {
        font-size: 24px;
        color: #333333;
        font-weight: bold;
      }
    }

    .login-form {
      width: 90%;
      margin: 0 auto;

      .account {
      }

      .password {
        margin: 20px 0;
      }

      .btn {
        .submit {
          background-color: rgba(255, 45, 137, 1);
          color: #ffffff;
          padding: 14px 20px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
